<template>
  <div>
    
     <section class="container-login">
			<div class="wrap-login layui-anim layui-anim-up">
				<form class="login-form validate-form layui-form"  :model="user">
          <span class="login-form-title">
						 忘记密码
					</span>
					<div class="wrap-input validate-input">
						<input class="input" type="tel" name="phone" placeholder="手机号" maxlength="11" lay-verify="required" v-model="user.mobile">
						<span class="focus-input"></span>
						<span class="symbol-input100">
              <i class="el-icon-user" style="margin-left:-20px;font-size:20px"></i>
						</span>
					</div>

          <!-- 验证码 -->
          <div class="wrap-input validate-input">
						<input class="input" type="text" name="text" placeholder="请输入短信验证码" lay-verify="required" v-model="user.code" autocomplete="off" οnfοcus="this.type='text'">
						<span class="focus-input"></span>
						<span class="symbol-input100">
              <i class="el-icon-message" style="margin-left:-20px;font-size:20px"></i>
						</span>
						<a @click="getCode"  class="code" style="z-index: 160px;">
              <div class="login_getCode">{{codeText}}</div>
            </a>
					</div>

          <!-- 重设密码 -->
					<div class="wrap-input validate-input">
						<input class="input" type="text" name="password" placeholder="请输入密码" lay-verify="required" v-model="user.password" autocomplete="new-password" οnfοcus="this.type='password'">
						
						<span class="focus-input"></span>
						<span class="symbol-input100">
              <i class="el-icon-lock" style="margin-left:-20px;font-size:20px"></i>
						</span>
					</div>

          <!-- 确认密码 -->
					<div class="wrap-input validate-input">
						<input class="input" type="text" name="password" placeholder="请输入密码" lay-verify="required" v-model="user.re_password" autocomplete="new-password" οnfοcus="this.type='password'">
						
						<span class="focus-input"></span>
						<span class="symbol-input100">
              <i class="el-icon-lock" style="margin-left:-20px;font-size:20px"></i>
						</span>
					</div>
					
					<div class="container-login-form-btn">
						<input  class="login-form-btn" value="提交" type="button" lay-submit lay-filter="login" @click="submitFrom()">
					</div>
				</form>
             </div>
    </section>
     
  </div>
</template>

<script>
import Yeepass from '@/tools/pass';
import axios from 'axios';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {

  },
  data() {
    //这里存放数据
    return {
      url:'',
      checkList: ['选中且禁用','复选框 A'],
      user:{
        mobile:"",
        code:"",
        password:"",
        re_password:"",
      },
      object:{},
      codeText:'获取验证码',
      // 验证码定时器
      timer_code:'',
      //倒计时时间
      timer_count:60,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 获取验证码
    getCode(){
      if(String(this.user.mobile).length != 11){
        this.$message.error("请输入正确的手机号");
        return;
      }

      if(this.codeText != "获取验证码"){
        return;
      }

      this.timer_count = 60;
      var params = new URLSearchParams();
      params.append('mobile', String(this.user.mobile));
      params.append('event', 'forgot');
      let that = this;
      that.$post(this.API.Sms_code,params).then((res)=>{
        if(res.code==1){
          that.timer_code = setInterval(()=>{
            that.codeText = this.timer_count;
            that.timer_count--;
            if(that.timer_count<0){
              that.codeText = '获取验证码';
              clearInterval(that.timer_code);
            }
          }, 1000);
        }
      })
    },
    
    // 提交
    submitFrom(){
      if(String(this.user.mobile).length != 11){
        this.$message.error("请输入正确的手机号");
        return;
      }
      if(String(this.user.code).length != 4){
        this.$message.error("请输入正确的手机号");
        return;
      }
      if(String(this.user.password).length < 6){
        this.$message.error("密码必须大于6位数");
        return;
      }
      if(String(this.user.re_password).length < 6){
        this.$message.error("密码必须大于6位数");
        return;
      }
      if(String(this.user.re_password) != String(this.user.password)){
        this.$message.error("两次密码输入不一致");
        return;
      }
      var params = new URLSearchParams();
      params.append('mobile', String(this.user.mobile));
      params.append('code', String(this.user.code));
      params.append('password', String(this.user.password));
      this.$post(this.API.UserForgotPwd,params).then((res)=>{
        if(res){
          //修改成功，跳到登录页
          this.$message.success('修改成功，请重新登录');
          this.$router.push({
            path:'/login',
            name:'login'
          })
        }
      })
    },
    goUrl(path,name){
        this.$router.push({
            path:path,
            name:name
        })
    }


  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style scoped>
 * {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
  }
  a{
    cursor: pointer;
    text-decoration: none;
  }

  .container-login {
    width: 100%;
    min-height: 70vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background: -webkit-linear-gradient(-135deg, #FDC7AA, #FDC7AA);
    background: -o-linear-gradient(-135deg, #FDC7AA, #FDC7AA);
    background: -moz-linear-gradient(-135deg, #FDC7AA, #FDC7AA);
    background: linear-gradient(-135deg, #FDC7AA, #FDC7AA);
    /* background-image: url(../../static/背景色块.png); */
    /* background-repeat: no-repeat; */

  }

  .wrap-login {
    margin-top: 100px;
    margin-bottom: 100px;
    width: 500px;
    height: 500px;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center;


  }

  a {
    font-family: Poppins-Regular;
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
    margin: 0px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
  }

  a:focus {
    outline: none !important;
  }

  a:hover {
    color: #70A9FF;
  }

  p {
    font-family: Poppins-Regular;
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
    margin: 0px;
  }

  ul,
  li {
    margin: 0px;
    list-style-type: none;
  }

  /*---------------------------------------------*/
  input {
    outline: none;
    border: none;
  }

  textarea {
    outline: none;
    border: none;
  }

  textarea:focus,
  input:focus {
    border-color: transparent !important;
  }

  input:focus::-webkit-input-placeholder {
    color: transparent;
  }

  input:focus:-moz-placeholder {
    color: transparent;
  }

  input:focus::-moz-placeholder {
    color: transparent;
  }

  input:focus:-ms-input-placeholder {
    color: transparent;
  }

  textarea:focus::-webkit-input-placeholder {
    color: transparent;
  }

  textarea:focus:-moz-placeholder {
    color: transparent;
  }

  textarea:focus::-moz-placeholder {
    color: transparent;
  }

  textarea:focus:-ms-input-placeholder {
    color: transparent;
  }

  input::-webkit-input-placeholder {
    color: #999999;
  }

  input:-moz-placeholder {
    color: #999999;
  }

  input::-moz-placeholder {
    color: #999999;
  }

  input:-ms-input-placeholder {
    color: #999999;
  }

  textarea::-webkit-input-placeholder {
    color: #999999;
  }

  textarea:-moz-placeholder {
    color: #999999;
  }

  textarea::-moz-placeholder {
    color: #999999;
  }

  textarea:-ms-input-placeholder {
    color: #999999;
  }

  /*---------------------------------------------*/
  button {
    outline: none !important;
    border: none;
    background: transparent;
  }

  button:hover {
    cursor: pointer;
  }

  iframe {
    border: none !important;
  }


  .txt1 {
    font-family: Poppins-Regular;
    font-size: 13px;
    line-height: 1.5;
    text-decoration: none;
    color: #000;
  }

  .txt2 {
    font-family: Poppins-Regular;
    font-size: 13px;
    line-height: 1.5;
    color: #666666;
    text-decoration: none;
  }

  .p-t-12 {
    padding-top: 12px;
  }

  .p-t-136 {
    padding: 60px 0px 35px 0px;
    margin-left: 130px;



  }

  .text-center {
    text-align: center;

  }

  .text-center a {
    margin: 0px 5px;
    font-size: 13px;
  }

  .limiter {
    width: 100%;
    margin: 0 auto;
  }

  .login_getCode {
    background-color: #5793fd;
    height: 100%;
    width: 103px;
    font-size: 13px;
    line-height: 42px;
    border-radius: 21px;
    text-align: center;
    color: #ffffff;
  }

  /*------------------------------------------------*/

  .login-pic {
    width: 316px;
  }

  .login-pic img {
    max-width: 100%;
  }

  .symbol-input100 {
    font-size: 15px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    position: absolute;
    border-radius: 25px;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-left: 35px;
    pointer-events: none;
    color: #666666;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  }

  .symbol-input {
    font-size: 15px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    position: absolute;
    border-radius: 25px;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-left: 35px;
    pointer-events: none;
    color: #e6e6e6;

    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  }

  /* .input:focus + .focus-input + .symbol-input {
  color: #ffe14e;
  padding-left: 28px;
} */

/* 协议 */
.agrea_box{
  display: flex;
  align-items: center;
  justify-content: center;
}
.agrea_text{
  font-size: 12px;
  margin-left: 8px;
}
  /*----------------------------------------------*/
  .login-form {
    width: 368px;
  }

  .login-form-title {
    text-align: center;
    width: 100%;
    display: block;
    padding-bottom: 30px;
    font-size: 32px;
    font-weight: 800;
  }

  /*---------------------------------------------*/
  .wrap-input {
    position: relative;
    width: 100%;
    z-index: 1;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 42px;
    border-radius: 21px;
    background: #e6e6e6;
  }

  .login_img {
    width: 28px;
    height: 28px;
    margin: 0px 0px 0px 14px;
  }

  .input {
    font-family: Poppins-Medium;
    font-size: 15px;
    line-height: 1.5;
    color: #666666;
    display: block;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border-radius: 25px;
    padding: 0 10px 0 40px;
  }


  /* 按钮 */
  .container-login-form-btn {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 20px;
  }

  .login-form-btn {
    font-family: Montserrat-Bold;
    font-size: 15px;
    line-height: 1.5;
    color: #fff;
    text-transform: uppercase;
    width: 100%;
    height: 42px;
    border-radius: 21px;
    background: -webkit-linear-gradient(-135deg, #FF7226, #FF9D68);
    background: -o-linear-gradient(-135deg, #FF7226, #FF9D68);
    background: -moz-linear-gradient(-135deg, #FF7226, #FF9D68);
    background: linear-gradient(-135deg, #FF7226, #FF9D68);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 25px;

    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  }

  /* .login-form-btn:hover {
    background: #333333;
  } */

  .el-checkbox__input {
    margin-top: 50px;
  }

  div>>>.el-checkbox__label {
    font-size: 12px;
    margin-top: 30px;
  }

/* 媒体查询 */

@media (max-width: 992px) {
  .wrap-login {
    padding: 67px 90px 33px 85px;
  }

  .login-pic {
    width: 35%;
  }

  .login-form {
    width: 100%;
  }
  .login-form-title{
    margin-top: 0px;
  }
}

@media (max-width: 768px) {
  .wrap-login {
    padding: 100px 80px 33px 80px;
  }

  .login-pic {
    display: none;
  }

  .login-form {
    width: 100%;
  }
  .login-form-title{
    margin-top: -20px;
  }
}

@media (max-width: 576px) {
  .wrap-login {
    padding: 100px 15px 33px 15px;
  }
  .login-form-title{
    margin-top: -20px;
  }
}
</style>
